import React, { useState, useEffect } from 'react';
import styles from './index.module.css';
import { LeftOutlined, DownOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function Hygiene() {
  const navigate = useNavigate();
  const [hygieneRecords, setHygieneRecords] = useState([]);
  //   {
  //     id: 1,
  //     date: '2023-12-19',
  //     time: '12:00',
  //     title: '食堂厨房日常卫生检查',
  //     area: '厨房洗切区',
  //     image: 'https://picsum.photos/80/80?random=1',
  //     inspector: '李亮亮',
  //     department: '办公室',
  //     content:
  //       '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
  //   },
  //   {
  //     id: 2,
  //     date: '2023-12-19',
  //     time: '12:00',
  //     title: '食堂厨房日常卫生检查',
  //     area: '厨房洗切区',
  //     image: 'https://picsum.photos/80/80?random=2',
  //     inspector: '李亮亮',
  //     department: '办公室',
  //     content:
  //       '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
  //   },
  // ];

  const getHygieneList = async () => {
    try {
      let response = await axios.get('http://localhost:3009/gwh/HygieneList');
      if (response.data.code === 200) {
        console.log(response.data.data);

        setHygieneRecords(response.data.data);
      }
    } catch (error) {}
  };

  useEffect(() => {
    getHygieneList();
  }, []);

  const handleRecordClick = (record) => {
    navigate('/HygieneDetail', { state: { record } });
  };

  return (
    <div className={styles.hygieneContainer}>
      <div className={styles.header}>
        <div className={styles.backButton}>
          <LeftOutlined onClick={() => navigate(-1)} />
        </div>
        <div className={styles.title}>卫生检查</div>
        <div className={styles.emptySpace}></div>
      </div>

      <div className={styles.contentArea}>
        <div className={styles.filterSection}>
          <div className={styles.dateFilter}>2023年12月</div>
          <div className={styles.areaFilter}>
            <span>全部区域</span>
            <DownOutlined style={{ fontSize: '12px', marginLeft: '5px' }} />
          </div>
        </div>

        <div className={styles.recordsContainer}>
          {hygieneRecords.map((record, index) => (
            <div
              key={index}
              className={styles.recordItem}
              onClick={() => handleRecordClick(record)}
            >
              <div className={styles.recordHeader}>
                <div className={styles.indicatorLine}></div>
                <div className={styles.dateTime}>
                  {record.CheckTime.slice(0, 10)}
                </div>
              </div>
              <div className={styles.recordCard}>
                <div className={styles.recordImage}>
                  <img src={record.imgUrl} alt="卫生检查" />
                </div>
                <div className={styles.recordContent}>
                  <div className={styles.recordTitle}>{record.title}</div>
                  <div className={styles.recordArea}>
                    <span className={styles.areaLabel}>检查区域：</span>
                    <span className={styles.areaValue}>{record.area}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
